<template>
    <div>
        <div style="background-color:red;height: 50px;line-height: 50px;text-align: center;font-size: 18px;color:white">热点</div>
        <!--        切换频道-->
        <div style="margin-top: 10px">
            <div style="height: 30px;line-height: 30px;padding-left: 10px"><span style="color: red"><van-icon name="fire" /></span><span>热点新闻</span></div>
        </div>
        <div v-if="'true'" style="text-align: center;color:red">今日请求次数已超限制! ! !</div>
        <ul style="margin-top: 15px;margin-bottom: 40px" v-else>
            <router-link :to="{path:'/HotSon',query:{uniquekey:item.uniquekey}}" tag="li" v-for="(item,index) in arr" :key="index" class="list" @click="enter(item.uniquekey)"><span class="listSpan">{{index+1}}.</span>{{item.title}}</router-link>
        </ul>
        <epidemic></epidemic>
    </div>
</template>

<script>


    import {news} from "../api/api";
    import epidemic from "../components/epidemic"

    export default {
        name: "hot",
        components:{
            epidemic
        },
        data() {
            return {
                arr:[],
                value: '',
                showPopover: false,
            };
        },
        created() {
            news().then((res)=>{
                // console.log(res.result.result)
                this.arr = res.result.data
            })
        },
        methods:{

        }
    }
</script>

<style scoped>
    li{
        list-style: none;
    }
    .list{
        margin-top: 7px;
        height: 30px;
        line-height: 30px;
        white-space:nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
    }
    .listSpan{
        display: inline-block;
        width: 30px;
        height: 30px;
        color: red;
        text-align: center;
    }
    .history{
        width: 100%;
        height: 100px;
        background-color: red;
    }
</style>